import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Container, Content } from 'native-base';
import { Header } from '../../component';
import { Colors } from '../../theme';

export default class courseDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    onLeftPress() {
        this.props.navigation.goBack()
    }
    render() {
        const { navigation } = this.props;
        let details = navigation.getParam("params");//接受传过来的对象
        return (
            <Container style={Styles.container}>
                <Header title={details.title} onLeftPress={() => this.onLeftPress()} />
                <Content padder>
                    {details.detailsArr.map(item =>

                        <View style={Styles.ruleContainer} key={item['key']}>
                            <View style={Styles.verticalLine} />
                            <View style={{ marginLeft: 6 }}>
                                <Text style={{ color: Colors.C0, fontSize: 17, fontWeight: '500' }}>{item['title']}</Text>
                                <Text style={Styles.ruleText}>{item['text']}</Text>
                            </View>
                        </View>

                    )}
                </Content>
            </Container>
        )
    }
}

const Styles = StyleSheet.create({
    container: { backgroundColor: Colors.C8 },
    ruleContainer: { flexDirection: 'row', paddingTop: 20 },
    ruleText: { marginTop: 8, fontSize: 14, lineHeight: 20, color: Colors.C2 },
    verticalLine: { height: 22, width: 3, borderRadius: 3, backgroundColor: Colors.C1 },
});